import { createElement, FC, Suspense } from 'react';
import { useRoute } from 'react-router5';
import { findSegment } from './util.ts';
import NotFoundPage from '../NotFoundPage.tsx';
import { observer } from 'mobx-react-lite';
import { IRoutes } from '@todo/core';

const ContentContainer: FC = () => {
  const route = useRoute();

  const segmentsArray = route.route.name.split('.');

  const pageComponent = findSegment(
    route.router.getDependencies().routes as IRoutes,
    segmentsArray,
  );
  
  return pageComponent ? (
    <Suspense>{createElement(pageComponent)}</Suspense>
  ) : (
    <NotFoundPage />
  );
};

export default observer(ContentContainer);
